<!--
 * @Author: Bennent_G
 * @Date: 2024-12-23 16:14:13
 * @LastEditTime: 2025-01-17 14:20:22
 * @Description:
-->
<template>
	<a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
		<div class="logo-box">
			<img src="@/assets/logo.png" />
			<h2>状态分析</h2>
		</div>
		<a-menu v-model:selectedKeys="selectedKeys" mode="inline"
			triggerSubMenuAction="click" :inline-collapsed="collapsed" :items="menuData" @select="onSelect">
		</a-menu>
	</a-layout-sider>
</template>

<script setup lang="ts">
import { ref, computed, defineComponent, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import type { MenuProps } from 'ant-design-vue';
import { useMenuStore } from "@/stores";
import { usePermission } from "@/hooks/admin/usePermission";
import useRouteHook from '@/hooks/admin/useRouteHook';

defineComponent({
	name: 'BaseLayoutSidier',
});
const emit = defineEmits(['update:modelValue']);
const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	}
});
const collapsed = computed({
	get: () => props.modelValue,
	set: (value) => emit('update:modelValue', value)
});

const { currentRoute } = useRouteHook();

// 权限菜单初始化
const menuData = ref<typeof MenuProps["items"]>([]);
const { getPermissionByRoleId } = usePermission();
onMounted(() => {
	// 获取角色权限
	(async () => {
		menuData.value = await getPermissionByRoleId({roleId: 1});
	})();
});

// 菜单切换
const menuStore = useMenuStore();
const { addMenuTabCache } = menuStore;
const selectedKeys = ref<string[]>([]);
watch(
	() => currentRoute.value.path,
	(newValue) => {
		selectedKeys.value = [newValue];
	},
	{ immediate: true }
);

const router = useRouter();
const onSelect = (e: any) => {
	const { item } = e;
	addMenuTabCache({
		id: item.id,
		title: item.title,
		path: item.path,
		icon: item.icon,
		parentId: item.parentId,
	});
	router.push(item.path || '/admin/welcome');
};

</script>

<style scoped lang="scss">
.ant-layout-sider {
	flex: 0 0 220px !important;
	max-width: 220px !important;
	min-width: 220px !important;
	width: 220px !important;
	background-color: var(--base-aside-background-color);
	box-shadow: var(--base-box-shadow);
	font-weight: 600;
}

.logo-box {
	display: flex;
	align-items: center;
	height: 56px;
	box-sizing: border-box;
	padding: 0 16px;

	img {
		width: 40px;
		height: 40px;
		object-fit: contain;
		margin-right: 8px;
	}

	h2 {
		display: inline-flex;
		margin-bottom: 0 !important;
		transition: all 0.3s linear;
	}
}

.ant-menu {
	border-inline-end: none !important;
}

.ant-layout-sider-collapsed {
	flex: 0 0 56px !important;
	max-width: 56px !important;
	min-width: 56px !important;
	width: 56px !important;

	.logo-box {
		justify-content: center;
		padding: 0;

		h2 {
			display: none;
		}
	}
}

:deep(.ant-menu-item) {
	border-radius: 2px;
	margin-inline: unset;
	margin-block: unset;
	width: 100%;
	svg {
		font-size: 18px;
	}
}
:deep(.ant-menu-submenu-title) {
	margin-inline: unset;
    margin-block: unset;
	width: 100%;
	svg {
		font-size: 18px;
	}
}
</style>
